<template>
    <div class="an-user">

      <div class="an-userinfo">
        <van-image
          class="an-img"
          round
          width="60px"
          height="60px"
          :src="userInfo.userPhoto?userInfo.userPhoto:userDefaultImg"
        />

        <div class="an-text" v-if="isLogin">
          <div>Hi~</div>
          <div class="an-name">{{userInfo.username}}</div>
        </div>
        <van-button plain round size="small" type="primary" v-else @click="clickLogin">立即登录</van-button>
      </div>

      <div class="an-pad">
        <div class="an-box">
          <div class="an-head">
            <div class="an-title">我的订单</div>
            <div class="an-subtitle" @click="clickOrder()">全部订单</div>
          </div>
          <van-grid class="an-grid">
            <van-grid-item icon="card" text="待付款" dot @click="clickOrder(1000)" />
            <van-grid-item icon="send-gift" text="待发货" @click="clickOrder(1100)"/>
            <van-grid-item icon="todo-list" text="待确认" @click="clickOrder(1110)"/>
            <van-grid-item icon="bill" text="待评价" @click="clickOrder(1120)"/>
          </van-grid>
        </div>

        <van-cell title="我的收藏" is-link @click="clickTo(4)">
          <template #icon>
            <van-icon name="like-o" color="#ff976a" size="20" />
          </template>
        </van-cell>

        <van-cell-group>
          <van-cell title="收货地址" is-link @click="clickTo(3)">
            <template #icon>
              <van-icon name="location-o" color="#07c160" size="20" />
            </template>
          </van-cell>
          <van-cell title="修改密码" is-link @click="clickTo(2)">
            <template #icon>
              <van-icon name="edit" color="#f1c011" size="20" />
            </template>
          </van-cell>
          <van-cell title="设置" is-link @click="clickTo(1)">
            <template #icon>
              <van-icon name="setting-o" color="#1989fa" size="20" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <router-view v-slot="{ Component }">
        <transition name="fade-transform" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>

    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return{
      userDefaultImg: require("../../assets/user_def.jpg")
    };
  },
  computed: mapState(['userInfo','isLogin']),
  mounted() {
    console.log(this.userInfo);
  },
  methods:{

    clickTo(n) {
      if(this.isLogin) {
        let url;
        switch(n) {
          case 1: // 设置
            url = '/userSys';
            break;
          case 2: // 修改密码
            url = '/editPassword';
            break;
          case 3: // 地址管理
            url = '/address';
            break;
          case 4: // 我的收藏
            url = '/collect';
            break;
        }
        this.$router.push({path:url});
      }else{
        this.$toast('请先登录');
      }
    },

    clickLogin() {
      this.$router.push({path:"/login"});
    },
    clickOrder(tab) {
      if(this.isLogin) {
        this.$router.push({path:'/orderList', query: { tab: tab }});
      }else{
        this.$toast('请先登录');
      }
    }
  }
};
</script>

<style lang="scss">
.an-user{
 .van-cell{
    margin-bottom: 10px;
    .van-icon{
      line-height: 24px;
      padding-right: 5px;
    }
  }
  .an-grid{
    .van-icon{
      /* background: linear-gradient(to bottom right, #ffafaf, #fb1010);
      background-clip: text;
      color: transparent; */
      color: #e84646;
    }
  }
}
</style>
<style lang="scss" scoped>
@import "../../css/mixin.scss";
.an-userinfo{
  display: flex;
  padding: 20px 15px;
  background-color: #ffffff;
  align-items: center;
  .an-img{
    margin-right: 10px;
  }
  .an-text{
    .an-name{
      font-size: 18px;
      font-weight: 600;
    }
  }
}
.an-pad{
  padding:10px;
}
.an-box{
  padding: 0;
  margin-bottom: 15px;
  .an-head{
    padding: 15px;
    .an-title{
      float: left;
      font-size: 16px;
      font-weight: 600;
    }
    .an-subtitle{
      color: $gray-7;
      float: right;
    }
    &::after{
      @include clearFloat
    }
  }
}
</style>